<template>
	<view >
		<view style="background-color: white;">
			<u--form labelPosition="left" :model="info" :rules="rules" ref="uForm">
				<view style="padding: 20rpx;">
					<u-form-item label="店铺名称" prop="name" :labelWidth="labelWidth" required labelPosition="left" :borderBottom="true">
						<input placeholder="请输入" v-model="info.name"/>
					</u-form-item>
					<u-form-item label="主营类目" prop="category" :labelWidth="labelWidth" required labelPosition="left" :borderBottom="true">
					<view class="row-between-center" style="width: 100%;"  >
						<input style=" pointer-events: none;" :focus="false" v-model="info.category" 
							disabledColor="#ffffff" placeholder="请选择" border="none" placeholder-style="place"></input>
							<image src="/static/images/arrow_right.png" class="arrow"></image>
					</view>
					</u-form-item>
					<u-form-item label="店铺简介" prop="desc" :labelWidth="labelWidth" required labelPosition="top" :borderBottom="true">
						<u--textarea v-model="info.desc" placeholder="请输入内容" count border="none"
							:maxlength="50"></u--textarea>
					</u-form-item>
					<u-form-item label="所在省市区" prop="area" :labelWidth="labelWidth" required labelPosition="left" :borderBottom="true">
						<view class="row-between-center" style="width: 100%;"  >
							<input style=" pointer-events: none;" :focus="false" v-model="info.area" 
								disabledColor="#ffffff" placeholder="请选择" border="none" placeholder-style="place"></input>
								<image src="/static/images/arrow_right.png" class="arrow"></image>
						</view>
					</u-form-item>
					<u-form-item label="所属商圈" prop="circle" :labelWidth="labelWidth" required labelPosition="left" :borderBottom="true">
						<view class="row-between-center" style="width: 100%;"  >
							<input style=" pointer-events: none;" :focus="false" v-model="info.circle" 
								disabledColor="#ffffff" placeholder="请选择" border="none" placeholder-style="place"></input>
								<image src="/static/images/arrow_right.png" class="arrow"></image>
						</view>
					</u-form-item>
					<u-form-item label="详细地址" prop="address" :labelWidth="labelWidth" required labelPosition="left" :borderBottom="true">
						<input placeholder="请输入" v-model="info.address"/>
					</u-form-item>
					<u-form-item label="地图定位" prop="location" :labelWidth="labelWidth" required labelPosition="left" :borderBottom="true">
						<view class="row-between-center" style="width: 100%;"  >
								<view class="row-between-center" style="width: 100%;"  >
									<input style=" pointer-events: none;" :focus="false" v-model="info.location" 
										disabledColor="#ffffff" placeholder="请选择" border="none" placeholder-style="place"></input>
										<image src="/static/images/arrow_right.png" class="arrow"></image>
								</view>
						</view>
					</u-form-item>
					<u-form-item label="店铺服务半径" prop="name" :labelWidth="labelWidth" required labelPosition="left" :borderBottom="true">
						<view class="row-between-center" style="width: 100%;">
								<input placeholder="请输入" v-model="info.radius" />
								<view>公里</view>
						</view>
						
					</u-form-item>
					<u-form-item label="店铺联系人" prop="contact" :labelWidth="labelWidth" required labelPosition="left" :borderBottom="true">
						<input placeholder="请输入" v-model="info.contact"/>
					</u-form-item>
					<u-form-item label="联系人手机号" prop="mobile" :labelWidth="labelWidth" required labelPosition="left" :borderBottom="true">
						<input placeholder="请输入" v-model="info.mobile"/>
					</u-form-item>
					<u-form-item label="人均消费金额" prop="fee" :labelWidth="labelWidth" required labelPosition="left" :borderBottom="true">
						<view class="row-between-center" style="width: 100%;">
								<input placeholder="请输入" v-model="info.fee" />
								<view>元</view>
						</view>
					
					</u-form-item>
					<u-form-item label="会员储值门槛" prop="limit" :labelWidth="labelWidth" required labelPosition="left" :borderBottom="true">
						<view class="row-between-center" style="width: 100%;">
								<input placeholder="请输入" v-model="info.limit" />
								<view>元</view>
						</view>
					</u-form-item>
				</view>
		
				<view style="height: 20rpx;background-color:  #F2F3F8;"></view>
				<view style="padding: 20rpx;">
					<u-form-item label="店铺 logo" prop="logo" :labelWidth="labelWidth" required labelPosition="top" >
							<u-upload
							style="margin-top: 20rpx;"
								:fileList="fileList1"
								@afterRead="afterRead"
								@delete="deletePic"
								name="1"
								multiple
								:maxCount="1"
							></u-upload>
					</u-form-item>
				</view>
				<view style="height: 20rpx;background-color:  #F2F3F8;"></view>
				<view style="padding: 20rpx;">
					<u-form-item label="店铺 logo" prop="dazhong_imgs" :labelWidth="labelWidth" required labelPosition="top" >
							<u-upload
							style="margin-top: 20rpx;"
								:fileList="fileList1"
								@afterRead="afterRead"
								@delete="deletePic"
								name="1"
								multiple
								:maxCount="1"
							></u-upload>
					</u-form-item>
				</view>
				<view class="fuli">
					店铺提供的捧场福利
				</view>
				<view style="padding: 20rpx;">
					<u-form-item label="福利名称" prop="fuli_name" :labelWidth="labelWidth" required labelPosition="left" :borderBottom="true">
						<input placeholder="请输入" v-model="info.fuli_name"/>
					</u-form-item>
					<u-form-item label="福利价值" prop="fuli_value" :labelWidth="labelWidth" required labelPosition="left" :borderBottom="true">
						<view class="row-between-center" style="width: 100%;">
								<input placeholder="请输入" v-model="info.fuli_value" />
								<view>元</view>
						</view>
					</u-form-item>
					<u-form-item label="福利图片" prop="fuli_imgs" :labelWidth="labelWidth" required labelPosition="top" :borderBottom="true">
						<u-upload
						style="margin-top: 20rpx;"
							:fileList="fileList1"
							@afterRead="afterRead"
							@delete="deletePic"
							name="1"
							multiple
							:maxCount="1"
						></u-upload>
					</u-form-item>
					<u-form-item label="上传门店图片" prop="fuli_shop_imgs" :labelWidth="labelWidth" required labelPosition="top" >
						<u-upload
						style="margin-top: 20rpx;"
							:fileList="fileList1"
							@afterRead="afterRead"
							@delete="deletePic"
							name="1"
							multiple
							:maxCount="1"
						></u-upload>
					</u-form-item>
				</view>
					<view style="height: 20rpx;background-color:  #F2F3F8;"></view>
				<view style="padding: 20rpx;">
					<u-form-item label="上传营业执照照片" prop="fuli_value" :labelWidth="140" required labelPosition="top" >
						<image src="/static/images/verify_pic3.png" class="verify"></image>
					</u-form-item>
				</view>
					<view style="height: 20rpx;background-color:  #F2F3F8;"></view>
				<view style="padding: 20rpx;">
					<u-form-item label="上传法人身份证照片" prop="fuli_value" :labelWidth="140"  labelPosition="top" >
						<view class="col">
							<image src="/static/images/verify_pic1.png" class="verify"></image>
							<image src="/static/images/verify_pic2.png" class="verify"></image>
						</view>
					
					</u-form-item>
			
				</view>
			</u--form>
				<view style="height: 20rpx;background-color:  #F2F3F8;"></view>
			<view class="row-between-center" style="padding: 30rpx;">
				<view class="fee col-center">
					<view class="key">认证费</view>
					<view class="value">¥300</view>
					<view class="yuanjia">￥1000</view>
				</view>
				<view class="fee col-center">
					<view class="key">认证费</view>
					<view class="value">¥300</view>
					<view class="yuanjia">￥1000</view>
				</view>
			</view>
		</view>
		<view style="height: 300rpx;"></view>
		<view class="bottom row-between-center">
			<view class="btn1 row-center">保存并返回首页</view>
			<view class="btn2 row-center" @click="submit">提交认证</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				labelWidth:120,
				info:{
					name:'',
					category:'',
					desc:'',
					area:'',
					circle:'',
					address:'',
					location:'',
					radius:'',
					contact:'',
					mobile:'',
					fee:'',
					limit:'',
					logo:'',
					dazhong_imgs:'',
					fuli_name:'',
					fuli_value:'',
					fuli_imgs:'',
					fuli_shop_imgs:'',
					licence_img:'',
					faren_zheng:'',
					faren_back:''
				},
				rules: {
					'name': {
						type: 'string',
						required: true,
						message: '请输入活动名称',
						trigger: ['blur', 'change']
					},
					'category': {
						type: 'string',
						required: true,
						message: '请选择主营类目',
						trigger: ['blur', 'change']
					},
					'desc': {
						type: 'string',
						required: true,
						message: '请输入店铺简介',
						trigger: ['blur', 'change']
					},
					'area': {
						type: 'string',
						required: true,
						message: '请选择所在省市区',
						trigger: ['blur', 'change']
					},
					'circle': {
						type: 'string',
						required: true,
						message: '请选择所属商圈',
						trigger: ['blur', 'change']
					},
					'address': {
						type: 'string',
						required: true,
						message: '请输入详细地址',
						trigger: ['blur', 'change']
					},
					'location': {
						type: 'string',
						required: true,
						message: '请选择地图定位',
						trigger: ['blur', 'change']
					},
					'radius': {
						type: 'string',
						required: true,
						message: '请输入店铺服务半径',
						trigger: ['blur', 'change']
					},
					'contact': {
						type: 'string',
						required: true,
						message: '请输入店铺联系人',
						trigger: ['blur', 'change']
					},
					'mobile': {
						type: 'string',
						required: true,
						message: '请输入联系人手机号',
						trigger: ['blur', 'change']
					},
					'fee': {
						type: 'string',
						required: true,
						message: '请输入人均消费金额',
						trigger: ['blur', 'change']
					},
					'limit': {
						type: 'string',
						required: true,
						message: '请输入会员储值门槛',
						trigger: ['blur', 'change']
					},
					'logo': {
						type: 'string',
						required: true,
						message: '请上传店铺 logo',
						trigger: ['blur', 'change']
					},
					'dazhong_imgs': {
						type: 'string',
						required: true,
						message: '请输入上传大众点评 (或其他平台) 带客单价的照片',
						trigger: ['blur', 'change']
					},
					'fuli_name': {
						type: 'string',
						required: true,
						message: '请输入福利名称',
						trigger: ['blur', 'change']
					},
					'fuli_value': {
						type: 'string',
						required: true,
						message: '请输入福利价值',
						trigger: ['blur', 'change']
					},
					'fuli_shop_imgs': {
						type: 'string',
						required: true,
						message: '请上传福利图片',
						trigger: ['blur', 'change']
					},
					'fuli_imgs': {
						type: 'string',
						required: true,
						message: '请输入活动名称',
						trigger: ['blur', 'change']
					},
					'licence_img': {
						type: 'string',
						required: true,
						message: '请上传营业执照照片',
						trigger: ['blur', 'change']
					},
					
					}
			}
		},
		methods: {
			submit() {
				this.$refs.uForm.validate().then(res => {
					uni.$u.toast('校验通过')
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
		}
	}
</script>
<style>
	page{
		background: #F2F3F8;
	}
</style>
<style lang="scss" scoped>
	.fuli{
		padding-left: 20rpx;
		background: #F2F3F8;
		height: 90rpx;
		color: #676C7F;
		font-size: 24rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 40rpx; 
	}
	.verify{
		margin-top: 20rpx;
		width: 470rpx;
		height: 280rpx;
	}
	.fee{
		width: 330rpx;
		height: 266rpx;
		border-radius: 12rpx;
		border: 1rpx solid #E6E7EB;
		background: #F7F8FC;
		.key{
			color: #17161B;
			font-size: 28rpx;
			font-style: normal;
			font-weight: 600;
			line-height: 44rpx; /* 157.143% */
		}
		.value{
			margin-top: 30rpx;
			color:  #FF8934;
			font-size: 48rpx;
			font-style: normal;
			font-weight: 600;
			line-height: 48rpx; /* 100% */
		}
		.yuanjia{
			
			color: #70727F;
			font-size: 28rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 44rpx; /* 157.143% */
			text-decoration-line: strikethrough;
		}
	}
	.bottom{
		width: 100%;
		padding: 36rpx;
		background-color: white;
		bottom: 0;
		position: fixed;
		.btn1{
			width: 344rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background: #E6E6E6;
			color: #676C7F;
			font-size: 32rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 48rpx; /* 150% */
		}
		.btn2{
			width: 284rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background: #347FFF;
			color: #FFF;
			font-size: 32rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 48rpx; /* 150% */
		}
	}
	.arrow{
		width: 18rpx;
		height: 26rpx;
	}
</style>
